<template>
  <div class="recommend details gridListContainer" ref="recommend">
    <scroll :data="personalizedList" class="recommend-content" ref="scroll" v-show="personalizedList.length && listImg.length">
      <div>
        <carousel :swiperOption="swiperOption" :listImg="listImg" ref="carousel"></carousel>
        <!--<carousel :swiperOption="swiperOption1" :listImg="listImg" ref="carousel2"></carousel>-->
        <grid-list :list="personalizedList" :title="recommendGridList.name" :cols="recommendGridList.cols" :activePath="'recommend'"></grid-list>
      </div>
    </scroll>
    <loading v-show="!personalizedList.length || !listImg.length" class="recommendLoad"></loading>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
  import carousel from '../../base/carousel/carousel.vue'
  import GridList from '../../base/grid-list/grid-list.vue'
  import Scroll from '../../base/scroll/scroll.vue'
  import Loading from '../../base/loading/loading.vue'
  import {playlistMixin} from '../../common/js/mixin/playList'
  const ERROk = 200
  export default{
    mixins: [playlistMixin],
    data () {
      return {
        listImg: [],
        isList: false,
        personalizedList: [],
        recommendGridList: {
          name: '推荐歌单',
          cols: 3
        },
        swiperOption: {
          slidesPerView: 1,
          loop: true,
          centeredSlides: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          observer: true, // 修改swiper自己或子元素时，自动初始化swiper
          observeParents: true // 修改swiper的父元素时，自动初始化swiper
        },
        swiperOption1: {
          slidesPerView: 1,
          loop: true,
          centeredSlides: true,
          autoplay: {
            delay: 1500,
            disableOnInteraction: false
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          observer: true, // 修改swiper自己或子元素时，自动初始化swiper!!!
          observeParents: true // 修改swiper的父元素时，自动初始化swiper!!!
        }
      }
    },
    created() {
      this.getBanner()
      this.personalized()
    },
    methods: {
      getBanner() {
        this.$ajax.get('/banner').then((response) => {
          if (response.data.code === ERROk) {
            this.listImg = response.data.banners
            this.$nextTick(function () {
              this.$refs.carousel.showSwiper = true
              // this.$refs.carousel2.showSwiper = true
            })
          }
        })
      },
      personalized() {
        this.$ajax.get('/personalized').then((response) => {
          if (response.data.code === ERROk) {
            this.personalizedList = response.data.result
          }
        })
      },
      hasPlayList(playingList) {
        const bottom = playingList.length > 0 ? '4.5rem' : ''
        this.$refs.recommend.style.bottom = bottom
        this.$refs.scroll.refresh()
      }
    },
    components: {
      carousel,
      GridList,
      Scroll,
      Loading
    }
  }
</script>

<style>
  .recommend-content{
    height: 100%;
    overflow: hidden;
  }
  .recommendLoad{
    margin-top: 5rem;
  }
</style>
